<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #canvas {
            backgroundColor : antiquewhite;
        }
    </style>
</head>
<body>
    <h1>HashMap</h1>
    <canvas id="canvas" width="1024" height="400"></canvas>

    <script>
        let canvas = document.getElementById("canvas");
        let ctx = canvas.getContext("2d");
        let bWidth = 25;
        let bHeight = 15;
        let xBegin = 20;
        let yBegin = 20;
        let tableCells = [];
        fetch("http://localhost:8080/v8/map/stat").then(r=>r.json()).then(data=>{
            let length = data.buckets.length;
            canvas.width = xBegin + (length*(bWidth + 2));
            for(let i = 0; i < length; i++) {
                let x = xBegin + i*(bWidth + 2);
                let y = yBegin ;
                tableCells.push({x, yBegin});
                ctx.fillStyle="yellow";
                ctx.fillRect(x,yBegin,bWidth,bHeight);

                ctx.fillStyle="black";
                ctx.font="14px Georgia";
                ctx.fillText(i,x+bWidth/2-5,y+bHeight/2+4);
            }

            for(let i = 0; i < length; i++) {
                let x = tableCells[i].x;
                let node = data.buckets[i];
                for(let j=0; j<node.length; j++){
                    let y = yBegin+(j+1)*(bHeight+2);
                    ctx.fillStyle="LightBlue";
                    ctx.fillRect(x,y,bWidth,bHeight);

                    ctx.fillStyle="black";
                    ctx.font="14px Georgia";
                    ctx.fillText(node[j],x+bWidth/2-5,y+bHeight/2+4);
                }
            }

        });

    </script>
</body>
</html>